<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable({
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "<?php echo base_url();?>data_gudang/server",
					"bDeferRender": true,
					"bInfo": true,
					"bFilter": true,
					"bSort": true,
					//"sScrollY": "400px",
					"bPaginate": true,
					//"bScrollCollapse": true,
					"bLengthChange": false,
					//"bAutoWidth": false,
					"bJQueryUI": false,
					"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
						/* Append the grade to the default row class name */
							$('td:eq(3)', nRow).html( 'Rp. '+aData[3] );
					},
				"aoColumnDefs": [ {
                "sClass": "centered",
                "aTargets": [ 2,4,5,6 ]
        }, { 'bSortable': false, 'aTargets': [ 6 ] }
		]
    } );
} );

</script>
<script>
var myMessages = ['info','warning','error','success']; // define the messages types		 
function hideAllMessages()
{
		 var messagesHeights = new Array(); // this array will store height for each
	 
		 for (i=0; i<myMessages.length; i++)
		 {
				  messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
				  $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport	  
		 }
}

function showMessage(type)
{
	$('.'+ type +'-trigger').click(function(){
		  hideAllMessages();				  
		  $('.'+type).animate({top:"100"}, 500);
	});
}

$(document).ready(function(){
		 
		 // Initially, hide them all
		 hideAllMessages();
		 
		 // Show message
		 for(var i=0;i<myMessages.length;i++)
		 {
			showMessage(myMessages[i]);
		 }
		 
		 // When message is clicked, hide it
		 $('.message').click(function(){			  
				  $(this).animate({top: -$(this).outerHeight()}, 500);
		  });		 
		 
});       
</script>
                <!-- Build page from here: -->
                <div class="row-fluid">
                    <div class="span12">
						<div class="success message">
							<p><?php echo $notif; ?></p>

</div>
					<?php if($notif != NULL){ ?>
					<script>
					$(document).ready(function(){
							  $('.success').animate({top:"110"}, 500);
							  	self.setInterval(function(){$('.success').animate({top: -$(this).outerHeight()}, 500)},2000);
							 });

					</script>
					<?php } ?>
					<div class="shortcuts">
					<button class="btn"><a class="icon-plus-sign" style="font-size:25px;padding:5px;" href="<?php echo base_url();?>data_gudang/add"></a></button>
					<button class="btn"><i class="icon-trash" style="font-size:25px;padding:5px;"></i></button>
					</div>
						<fieldset>					
							<table class="bordered" cellpadding="0" cellspacing="0" border="0" id="example">
							<thead>
							<tr>
								<th width="15%">ID Bahan</th>
								<th width="30%">Nama</th>
								<th width="10%">Stok</th>
								<th width="10%">Harga</th>
								<th>Satuan</th>
								<th>Kategori</th>
								<th>Action</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td colspan="8" class="dataTables_empty">Loading data from server</td>
							</tr>
							</tbody>
							</table>
						</fieldset>
					</div><!-- End .span8 -->						
                </div><!-- End .row-fluid -->